<template>
	<view>
		<!-- 顶部导航栏 -->
		<cu-custom bgColor="bg-gradual-green" :isBack="true">
			<block slot="content">订单详情</block>
		</cu-custom>
		
		<!-- 消息提示 -->
		<message ref="message"></message>
		
		<!-- 订单详情 -->
		<!-- 1 订单信息 -->
		<view class="margin bg-white text-black radius">
			<view class="flex align-center solid-bottom padding-tb-sm">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-lg text-bold">订单信息</text>
			</view>
			<view class="padding">
				<view class="margin-bottom-sm flex align-center">
					<view class="text-bold">订单编号：</view>
					<view class="text-sm">{{order.code}}</view>
				</view>
				<view class="margin-bottom-sm flex align-center">
					<view class="text-bold">学员姓名：</view>
					{{order.studentName}}
				</view>
				<view class="margin-bottom-sm flex align-center">
					<view class="text-bold">联系方式：</view>
					{{order.phone}}
				</view>
				<view class="flex align-center">
					<view class="text-bold">订单状态： </view>
					<view v-if="order.state===0" class="cu-tag line-green">支付成功</view>
					<view v-else-if="order.state===1" class="cu-tag line-red">待支付</view>
					<view v-else-if="order.state===2" class="cu-tag line-blue">已退款</view>
					<view v-else class="cu-tag line-grey">已取消</view>
				</view>
			</view>
		</view>
		<!-- 2课程信息 -->
		<view class="margin radius bg-white" @click="handleCourseDetail">
			<view class="flex align-center solid-bottom padding-tb-sm">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-lg text-bold">课程信息</text>
			</view>
			<view class="padding ">
				<view class="flex text-black text-xl align-center justify-between margin-bottom-sm">
					<view>
						<view class="text-bold margin-bottom-sm">{{order.courseName}}</view>
						<view class="text-gray">x1</view>
					</view>
					<view class="text-price">{{order.totalPrice}}</view>
				</view>
			</view>
		</view>
		
		<view class="margin padding radius bg-white	text-black">
			<view class="flex align-center">
				<view class="text-bold">创建时间：</view>
				{{parseTime(order.createTime, '{y}-{m}-{d} {h}:{i}:{s}')}}
			</view>
			<view v-show="order.state===0" class="margin-top-sm flex align-center">
				<view class="text-bold">支付时间：</view>
				{{parseTime(order.payTime, '{y}-{m}-{d} {h}:{i}:{s}')}}
			</view>
			<view v-show="order.state===2" class="margin-top-sm flex align-center">
				<view class="text-bold">退款时间：</view>
				{{parseTime(order.refundTime, '{y}-{m}-{d} {h}:{i}:{s}')}}
				</view>
		</view>
		
		<view class="margin flex align-center justify-end">
			<button v-show="order.state===1" class="cu-btn bg-grey margin-right-sm" @click="handleCancleOrder">取消订单</button>
			<button v-show="order.state===1" class="cu-btn bg-red" @click="handlePayOrder">立即付款</button>
			<button v-show="order.state===0" class="cu-btn bg-red">退款</button>
		</view>
		
	</view>
</template>

<script>
	import { parseTime } from '@/utils/parse.js'
	import { getOrderByCode } from '@/api/order.js'
	import  { cancelOrderByCode } from '@/api/order.js'
	
	export default {
		data() {
			return {
				orderCode: undefined,
				order: {}
			}
		},
		created() {
			this.orderCode = this.$store.getters.orderCode
			this.getOrderByCode()
		},
		methods: {
			parseTime,
			// 根据订单编号获取订单信息
			getOrderByCode(){
				getOrderByCode(this.orderCode).then(res => {
					this.order = res.data
				}).catch(err => {
					console.log('获取异常');
				})
			},
			// 跳转课程详情
			handleCourseDetail() {
				this.$store.commit("course/set_courseId", this.order.courseId)
				uni.navigateTo({
					url: "/pages/course/course-detail/course-detail"
				})
			},
			// 取消订单处理
			handleCancleOrder() {
				cancelOrderByCode(this.order.code).then(res => {
					this.$refs.message.success({
						title: res.msg,
						duration: 2000
					})
					this.getOrderByCode()
				}).catch(err => {
					this.$refs.message.error({
						title: err.msg,
						duration: 2000
					})
				})
			},
			// 立即支付处理
			handlePayOrder() {
				this.$store.commit('course/set_courseId', this.order.courseId)
				uni.navigateTo({
					url: '/pages/order/create-order/create-order'
				})
				// console.log('支付');
			}
		}
	}
</script>

<style>

</style>
